<template>
  <el-row>
    <el-col :span="24" :offset="0">
      <el-form ref="add" :model="formData" label-width="150px">
        <el-form-item label="标题：" prop="title">
          <el-col :span="12" :offset="0">
            <el-input
              class="rp-input"
              placeholder="请输入标题"
              v-model="formData.title"
              clearable
              suffix-icon="el-icon-edit"
            ></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="路径：" prop="path">
          <el-col :span="12" :offset="0">
            <el-input
              class="rp-input"
              placeholder="请点击选择或输入路径"
              v-model="formData.path"
              clearable
            >
              <el-button
                slot="append"
                @click="openDirectory"
                icon="el-icon-folder-opened"
              ></el-button>
            </el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="描述：" prop="desc">
          <el-col :span="12" :offset="0">
            <el-input
              class="rp-input"
              placeholder="请输入描述"
              v-model="formData.desc"
              clearable
              suffix-icon="el-icon-edit"
            ></el-input>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :loading="submitFlag" @click="submit">
            添加
          </el-button>
        </el-form-item>
      </el-form>
    </el-col>
    <el-col class="el-form-item" :span="24" :offset="0">
      <el-button type="primary" @click="multiPull"> 批量更新 </el-button>
      <el-button type="primary" @click="saveList"> 保存配置 </el-button>
    </el-col>
    <el-col :span="24" :offset="0">
      <el-table
        ref="table"
        :data="tableData"
        border
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column type="index" label="序号" width="55">
        </el-table-column>
        <el-table-column prop="title" label="标题"> </el-table-column>
        <el-table-column prop="path" label="路径"> </el-table-column>
        <el-table-column prop="desc" label="描述"> </el-table-column>
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="handlePull(scope.row)" type="text" size="small">
              更新
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>
</template>

<script>
const data = [
  {
    title: "focus-vue",
    path: "D:/mayunCode/focus-vue",
    desc: "焦点插件代码库",
  },
  {
    title: "vue-press",
    path: "D:/mayunCode/vue-press",
    desc: "焦点插件说明文档代码库",
  },
  {
    title: "cmd-tool",
    path: "D:/mayunCode/cmd-tool",
    desc: "个人命令行工具",
  },
];
export default {
  data() {
    return {
      submitFlag: false,
      formData: {
        title: "",
        path: "",
        desc: "",
      },
      tableData: data,
      multiData: [],
    };
  },
  methods: {
    handleSelectionChange(rows) {
      console.log(rows);
      this.multiData = rows;
    },
    multiPull() {
      bridgeApi.gitPull(this.multiData);
    },
    handlePull(row) {
      bridgeApi.gitPull(row);
    },
    saveList() {
      console.log(this.tableData);
    },
    openDirectory() {
      console.log("adfasdf");
      bridgeApi.getDirectory((res) => {
        this.formData.path = res.canceled ? "" : res.filePaths[0];
        console.log(res);
      });
    },
    submit(data) {
      console.log(data);
      this.tableData.push(JSON.parse(JSON.stringify(this.formData)));
      // this.$refs.table.resolve(this.multiData);
      this.submitFlag = true;
      setTimeout(() => {
        this.submitFlag = false;
        this.$refs.add.resetFields();
        this.$message({
          message: "恭喜你，添加成功",
          type: "success",
        });
      }, 500);
    },
  },
};
</script>

<style lang="scss" scoped></style>
